<template>
  <div class="content-common">
    <div style="margin-top: -10px">
      <!-- <el-button type="warning" class="table-btn-success" @click="handleShowMap()">查看巡查记录</el-button> -->
      <el-table :data="tableData" border class="table-common" header-cell-class-name="table-header" ref="multipleTable">
        <el-table-column type="index" width="45" align="center" label="序号"></el-table-column>
        <el-table-column align="center" prop="stnm" label="测站" width="280"></el-table-column>
        <el-table-column align="center" prop="stType" label="测站类型">
          <template #default="scope">
            <span v-if="scope.row.stType === 1">坡面径流场</span>
            <span v-if="scope.row.stType === 2">小流域控制站</span>
          </template>
        </el-table-column>
        <el-table-column prop="patroller" label="巡查人员" align="center"> </el-table-column>
        <el-table-column prop="patrolTime" label="巡查时间" align="center" width="105"> </el-table-column>
        <el-table-column prop="itemName" label="	项目名称" align="center"> </el-table-column>
        <el-table-column prop="patrolContent" label="巡检内容" align="center"> </el-table-column>
        <el-table-column align="center" prop="status" label="巡检结果">
          <template #default="scope">
            <span v-if="scope.row.status === 0">正常</span>
            <span v-if="scope.row.status === 1">异常</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
      </el-table>
    </div>
    <!-- 查看巡查记录详情(地图)-->
    <el-dialog class="dialog_add_form" title="巡查记录" top="2%" v-model="dialogMap.show" width="1400px" v-if="dialogMap.show" :close-on-click-modal="false">
      <GaoMap :query="dialogMap.query" @close="closeMapDialog"></GaoMap>
    </el-dialog>
  </div>
</template>
<script>
import { getPatrolRecord } from '../../../api/index';
import GaoMap from './GaoMap.vue';
export default {
  components: { GaoMap },
  props: {
    query: {
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: [],
      dialogMap: {
        show: false,
        query: {}
      }
    };
  },
  created() {
    this.fetch(this.query);
  },
  methods: {
    fetch(row) {
      //查询巡检记录明细
      let data = {
        recordNo: row.recordNo
      };
      getPatrolRecord(data).then((res) => {
        this.tableData = res.object.detailList;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].stType = res.object.stType;
          this.tableData[i].stnm = res.object.stnm;
          this.tableData[i].patroller = res.object.patroller;
          this.tableData[i].patrolTime = res.object.patrolTime;
          this.tableData[i].patrolResult = res.object.patrolResult;
        }
      });
    },
    handerClose() {
      this.$emit('close');
    },
    handleShowMap(row) {
      this.dialogMap = {
        show: true,
        query: {
          type: 'view',
          recordNo: this.query.recordNo
        }
      };
    },
    closeMapDialog() {
      this.dialogMap = {
        show: false,
        query: {}
      };
    }
  }
};
</script>

<style lang="less" scoped>
.content-common {
  box-shadow: none;
}
.table-btn-success {
  margin-top: -10px;
  margin-bottom: 10px;
  background: #00b600 !important;
  border: 1px solid #00b600 !important;
  border-radius: 2px;
  color: #fff !important;
}
/deep/.dialog_add_form {
  height: calc(100vh - 6%);
}
/deep/.dialog_add_form .el-dialog__body {
  padding: 2px;
  height: calc(100% - 44px);
}
</style>